<template>
  <div>
    <div style="margin: 10px 0;">
      <el-row type="flex" class="row-search" >
        <el-col :span="2"><el-button @click="toggleSelection()" style="margin-left: 10px;">取消全选</el-button></el-col>
        <el-col :span="4"><el-input v-model="projectName" style="float:left; margin-left: 10px;  width: 200px;" suffix-icon="el-icon-search" placeholder="请输入项目名称："></el-input></el-col>
        <el-col :span="2"><el-button type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="load">搜索</el-button></el-col>
        <el-col :span="1"><el-button type="warning"  icon="el-icon-search" @click="reset">重置</el-button></el-col>
      </el-row>
    </div>

    <div style="margin: 10px 0; ">
      <el-row type="flex" class="row-update" >
        <el-col :span="2"><el-button type="success"  size="medium" style=" margin: 10px;" icon="el-icon-circle-plus-outline" @click="handAddForm">新增</el-button></el-col>
        <el-popconfirm
            style="margin-left: 5px;"
            confirm-button-text='确定'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="您确定执行批量删除吗？"
            @confirm="bathDel()"
        >
          <el-button slot="reference" type="danger"   size="medium" style="margin: 10px;" icon="el-icon-delete" > 批量删除</el-button>
        </el-popconfirm>
        <el-col :span="2">
<!--          <el-upload action="http://192.168.1.4:9090/project/import" :show-file-list="false" accept="xlsx" :on-success="handleExecleImportSuccess">
            <el-button type="primary"  size="medium" style="margin: 10px;" icon="el-icon-bottom"> 导入</el-button>
          </el-upload>-->
        </el-col>
        <el-col :span="2"><el-button type="primary"  size="medium" style="margin: 10px;" icon="el-icon-top" @click="exp"> 导出</el-button></el-col>
      </el-row>
    </div>

    <el-table
        :header-cell-style="{ background: '#F2F2F2', color: '#333' }"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="projectId" label="项目ID" width="80px;" show-overflow-tooltip/>
      <el-table-column prop="projectName" label="项目名称"  show-overflow-tooltip/>
      <el-table-column prop="projectNum" label="项目编号"  show-overflow-tooltip/>
      <el-table-column prop="typeId" label="项目种类编号" />
      <el-table-column prop="projectDesc" label="项目描述" />
      <el-table-column prop="status" label="项目状态" />
      <el-table-column prop="projectUser[0].userId" label="用户ID" />
      <el-table-column prop="users[0].userName" label="用户名" />
      <el-table-column prop="users[0].email" label="用户邮箱" />
      <el-table-column label="操作" width="400" align="center">
        <template slot-scope="scope">

          <el-button type="primary" @click="handleAddUser(scope.row)" icon="el-icon-edit" size="mini">添加项目负责人</el-button>
          <el-button type="success" @click="handleEdit(scope.row)"  size="mini">查看</el-button>
<!--          <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">修改</el-button>-->
          <!--          <el-button type="primary" @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">修改</el-button>-->
          <el-popconfirm
              style="margin-left: 5px;"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除该条消息吗？"
              @confirm="handleDel(scope.row.projectId)"
          >
            <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px;">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 6, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


    <el-dialog title="项目登记" :visible.sync="addFormVisible" width="60%">
      <el-form :model="project" :rules="addRules" ref="addForm" label-width="100px">
        <el-form-item label-width="0">
          <el-col :span="3">项目名称</el-col>
          <el-col :span="9">
            <el-input  v-model="project.projectName" autocomplete="off" ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label-width="0">
          <el-col :span="3">项目编号</el-col>
          <el-col :span="9">
            <el-input  v-model="project.projectNum" autocomplete="off" ></el-input>
          </el-col>
        </el-form-item>


        <el-form-item label-width="0">
          <el-col :span="3">项目种类</el-col>
          <el-col :span="15">
            <el-select clearable v-model="project.typeId"  placeholder="请选择" class="selectWidth">
              <el-option v-for="item in types"
                         :key="item.typeName"
                         :label="item.typeId"
                         :value="item.typeId">
                <span style="float: left">{{ item.typeId }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.typeName }}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label-width="0" >
          <el-col :span="3">项目描述</el-col>
          <el-col :span="9" >
            <el-input type="textarea" v-model="project.projectDesc" autocomplete="off" ></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formAdd">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="添加人员" :visible.sync="addUserVisible" width="35%">
      <el-form label-width="100px">
        <el-form-item  label-width="0">
          <el-col :span="5">项目编号</el-col>
          <el-col :span="15" >
            <el-input  v-model="project.projectNum" autocomplete="off" ></el-input>
          </el-col>
        </el-form-item>
        <el-form-item  label-width="0">
          <el-col :span="5">项目名称</el-col>
          <el-col :span="15" >
            <el-input  v-model="project.projectName" autocomplete="off" ></el-input>
          </el-col>
        </el-form-item>

        <el-form-item label-width="0">
          <el-col :span="5">项目人员</el-col>
          <el-col :span="15">
            <el-select clearable v-model="project.userId"  placeholder="请选择" class="selectWidth">
              <el-option v-for="item in users"
                         :key="item.userName"
                         :label="item.id"
                         :value="item.id">
                <span style="float: left">{{ item.id}}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.userName }}</span>
              </el-option>
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="saveUser">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
import {serveIP} from "../../public/config";

export default {
  name: "Project",
  data(){
    return{
      project:{
        projectId: '',
        projectName: '',
        projectNum: '',
        typeId: '',
        projectDesc: '',
        status:'',
        userId:'',
      },
      statusOptions: [{
        key: '未修理',
        value: 0,
        label: 0
      }, {
        key: '修理成功',
        value: 1,
        label: 1
      }, {
        key: '修理异常',
        value: 1,
        label: 1
      }],
      addRules:{
      },

      form: {},
      pageNum: 1,
      pageSize: 3,
      projectName: '',
      tableData: [],
      total: 0,

      dialogFormVisible: false,
      addFormVisible:false,
      addUserVisible:false,
      multipleSelection: [],
      types:[],
      users:[],
      uId:'',

      /*input: '',*/

      formLabelWidth: '60px',

      //只读
      isRead :false

    }
  },
  created() {
    this.load()
  },
  methods:{
    /*页面get请求*/
    load(){
      this.request.get("/project/page",{
        params: {
          pageNum:  this.pageNum,
          pageSize: this.pageSize,
          projectName: this.projectName,
        }
      }).then(res => {
        /*console.log(res)*/
        this.tableData = res.data.records
        /*console.log(res.data)*/
        this.total = res.data.total
      })

      this.request.get("/project/type/list").then(res => {
        this.types = res.data
      })

      this.request.get("/project/user/list").then(res => {
        this.users = res.data
      })

    },
    /*重置按钮事件*/
    reset(){
      //重置搜索框
      this.projectName = ""
      this.load()
    },


    //新增页面弹窗
    handAddForm(){
      this.isRead = false
      this.addFormVisible =true
      this.project = {}
    },
    /*新增弹窗表单提交*/
    formAdd(){

      this.request.post("/project/save",this.project)
          .then(res => {
            //若果返回结果为true
            if(res.data){
              this.$message.success("保存成功")
              this.addFormVisible=false
              this.load()
            }else {
              this.$message.error("保存失败")
            }
          })


    },
    handleAddUser(row){
        this.project = row
        /*this.form.pid = row.id*/
        this.addUserVisible = true
    },
    saveUser(){
      this.request.post("/project-user/save",this.project)
          .then(res => {
            //若果返回结果为true
            if(res.code === '200'){
              this.$message.success("保存成功")
              this.addUserVisible = false
              this.load()

            }else {
              this.$message.error("保存失败")
            }
          })
    },

    handleDel(projectId){
      this.request.delete('/project/' + projectId).then(res => {
        if(res.code === '200'){
          this.$message.success("删除成功")
          this.load()
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    //批量删除
    bathDel(){
      //map键值对绑定multipleSelection中的id值  [{},{},{}] => [multipleItem.1.id,..2.id,..3.id,..4]
      let ids = this.multipleSelection.map(v => v.projectId)
      this.request.post("/project/bath/del",ids).then(res => {
        if(res.code === '200'){
          this.$message.success("批量删除成功")
          this.load()
        }else {
          this.$message.error("批量删除失败")
        }
      })
    },

    handleEdit(row){
      this.isRead = true
      this.project = row
      this.addFormVisible = true
    },



    //新增其他表
    /*handleAddUser(row){
      this.form = row
      this.form.pid = row.id
      this.addUserVisible = true
    },*/


    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },


    handleAdd(){
      //新增
      this.dialogFormVisible = true
      this.form = {}
    },

    //保存
    /* save(){
       this.request.post("/maintain/save",this.form)
           .then(res => {
             //若果返回结果为true
             if(res.data){
               this.$message.success("保存成功")
               this.dialogFormVisible = false
               this.addFormVisible=false
               this.load()
             }else {
               this.$message.error("保存失败")
             }
           })
     },*/
    //编辑
    /*handleEdit(row){
      this.maintain = row
      this.dialogFormVisible = true
    },*/



    handleSelectionChange(val) {
      /*console.log(this.multipleSelection)*/
      this.multipleSelection = val
    },


    handleSizeChange(pageSize){
      this.pageSize = pageSize
      /*console.log(pageSize)*/
      this.load()
    },
    handleCurrentChange(pageNum){
      this.pageNum = pageNum
      /*console.log(pageNum)*/
      this.load()
    },
    exp() {
      window.open(`http://${serveIP}:9090/project/export`)
    },
    handleExecleImportSuccess(){
      this.$message.success("文件导入成功")
      this.load()
    }
  }

}
</script>

<style scoped>
.el-header {
  background-color: #ffffff;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.selectWidth{
  width: 100% !important;
}
</style>